<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		<style>
			*{margin: 0;padding: 0;list-style: none;text-decoration: none;font-family: '幼圆';color:#323232;}
			html{font-size: calc(100/750*100vw);}
			a {
  			-webkit-tap-highlight-color: transparent;
  			-webkit-touch-callout: none;
  			-webkit-user-select: none;}
 			h1,h2,h3,h4,h5,h6{font-size: 100%;font-weight:200;-webkit-margin-before: 0;-webkit-margin-after: 0;}
			section{min-height:12.08rem;width: 7.5rem;margin-top:1.26rem;background: #F0F0F0;}
			section form{width: 100%;background: #F0F0F0;position: relative;}
			section form h1{height:.8rem;width: 100%;text-indent:.3rem;font-size:.28em;background: #FAFAFA;
			line-height: .8rem;float:left;margin-bottom: .2rem;}
			section form input{height: .8rem;width:4.8rem;border: none;outline: none;font-size: .28rem;
			color: #909090;position:absolute;background: #FAFAFA;}
			section form .in1{left: 2.25rem;top: 0rem;text-align: left;}
			section form .in2{left: 2.25rem;top: 2rem;}
			section form .in3{left: 2.25rem;top: 3rem;}
			section form .in4{left: 2.25rem;top: 4rem;}
			section form .in5{left: 2.25rem;top: 7rem;}
			section form h2{height:1.8rem;width: 100%;text-indent:.3rem;font-size:.28rem;background: #FAFAFA;line-height: .8rem;
			float:left;margin-top: 0rem;}
			section form textarea{height:1.8rem;width: 4.8rem;overflow: auto;resize: none;border: none;
			background:#FAFAFA ;line-height: .8rem;font-size: .28rem;outline: none;}
			section form .text1{position: absolute;left:2.25rem;top: 6rem;height: .8rem;}
			section form .text2{position: absolute;left:2.25rem;top: 8rem;}
			footer{height: .9rem;position: fixed;bottom: 0;width: 100%;}
			footer h1{background: #8FC31F;font-size: .32rem;line-height: .9rem;text-align: center;color: #FAFAFA;
			font-family: "微软雅黑";}
			section .div2 h1{font-size: .32rem;line-height: .32rem;text-align: center;padding-top: 2.3rem;}
			section .div2 h2{font-size: .32rem;line-height: .32rem;text-align: center;margin-top: .25rem;}
		</style>
	</head>
	<body>
		<section>
			<div class="div1">
			<form action='#'>
				<h1>姓名</h1><input type="text" placeholder="真实姓名" class="in1" />
				<h1>性别</h1>
				<h1>年龄</h1><input type="text" placeholder="输入年龄" class="in2" />
				<h1>身份证号</h1><input type="text" placeholder="输入身份证号码" class="in3" />
				<h1>联系电话</h1><input type="text" placeholder="不少与7位" class="in4" />
				<h1>所在地区</h1>
				<h1>详细地址</h1><textarea maxlength="50"  minlength="5"
					placeholder="最少5个字，不能超过50个字" class="text1"></textarea>
				<h1>专业领域</h1><input type="text" placeholder="所擅长的领域" class="in5" />
				<h2>自我描述</h2><textarea maxlength="80" placeholder="不得超过80字" class="text2"></textarea>
			</form>
			<footer>
				<h1>申请开通</h1>
			</footer>
			</div>
			<div class="div2" style="display: none;">
				<h1>申请已提交</h1>
				<h2>请等待审核</h2>
			</div>
		</section>
		<script type="text/javascript" src="js/jquery.js" ></script>
		<script>
			$('.in4').blur(function(){
				var reg=/^1[35678]{1}\d{9}$/g;
				var str=$(this).val();
				if(!reg.test(str)){
					$('.in4').val('请填写有效的手机号');
				}else{
					var re=/^(\d{3})(\d{4})(\d{4})$/;
					var str=str.replace(re,'$1****$2');
					$('.in4').val(str);
				}
			})
			$('footer h1').click(function(){
				$('section div').eq(0).hide();
				$('section div').eq(1).show();
			})
			
		</script>
	</body>
</html>

